function fn(month,salary){
  let myCherts = echarts.init(document.querySelector('.col-xl-8 .card'))
  let option ={
    title:{
      text:'2020全学科薪资趋势',
      top:15,
      left:10,
      textStyle:{
        fontSize:16
      }
    },
    xAxis: {
      type: 'category',
      data: month,
      axisLabel:{
        color:'#999',
      },
      axisLine:{
        lineStyle:{
          color:'#ccc', //轴线颜色
          type : 'dashed' //轴线类型
        }
      }

    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          type : 'dashed'
        }
      }
    },
    series: [
      {
        data: salary,
        type: 'line',
        smooth: true, //平滑
        lineStyle:{
          width:6
        },
        symbolSize:10 , //小圆圈的大小
        areaStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 0.8, color: 'rgba(255,255,255,0.2)' // 80% 处的颜色
            },{
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
          }],
            global: false // 缺省为 false
          }
        }
      }
    ],
    grid:{
      top: '20%'
    },
     // 提示框组件
     tooltip:{
      trigger:'axis' //鼠标移到轴上即可配置
    },
    
    color:[{    //线条的颜色
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }]

  };
  myCherts.setOption(option)
}
fn()
// 饼图--右上角
function fn1(data){
  let myCherts = echarts.init(document.querySelector('#salary'))
  let option ={   
    title:{
      text:'班级薪资分布',
      top:15,
      left:10
    },
    tooltip: {  //提示框组件
      trigger: 'item'
    },
    legend: {  // 图例
      bottom: '5%',
      left: 'center',
      itemWidth:10

    },
    color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',  //表示图标的类型
        radius: ['50%', '65%'],  //饼的半径
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,  //控制标签文本不显示
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data
      }
    ]


  };
  myCherts.setOption(option)
}
fn1()


// 柱状图
function fn2(data){
  // console.log(data)
  let myCherts = echarts.init(document.querySelector('#lines'))
  let option ={
     tooltip: {  //提示框组件
        trigger: 'item'
      },
    xAxis: {
      type: 'category',
      // data: ['周星驰', '刘德华', '黄家驹', '梁家辉', '刘德华', '黎明', '张学友','郭富城'],
      data: data[1].map(item => item.name),
      axisLabel:{
        color:'#999',
      },
      axisLine:{
        lineStyle:{
          color:'#ccc', //轴线颜色
          type : 'dashed' //轴线类型
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          type : 'dashed'
        }
      }
    },
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: data[1].map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      },
      {
        // data: [22820, 19932, 16901, 15934, 21290, 13300, 14300, 18320],
        data: data[1].map(item => item.salary),
        type: 'bar',
        name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      }
    ],
    color:[{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#34D39A' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  ] , //柱状颜色
    grid:{
      top:30,
      left:70,
      right:30,
      buttom:50,
    }  



};
  myCherts.setOption(option)

  document.querySelector('#btns').addEventListener('click',function(e){
    if(e.target.tagName==='BUTTON'){
      let num = e.target.innerHTML.trim()
      // trim()去掉两面的空白
      // console.log(num)
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      option.xAxis.data = data[num].map(item =>{return item.name})
      option.series[0].data=data[num].map(item=>{return item.hope_salary})
      option.series[1].data=data[num].map(item=>{return item.salary})
      myCherts.setOption(option)
    }
  })
}
// fn2()



// 饼图--左下角
function fn3(man,girl){
  let myCherts = echarts.init(document.querySelector('#gender'))
  let option ={
    title:[{
      text:'男女生薪资分布',
      top:15,
      left:10,
      textStyle:{
        fontSize:16
      }

    },{
      text:'男生',
      top:'50%',
      left:'45%',
      textStyle:{
        fontSize:12
      }
    },{
      text:'女生',
      top:'85%',
      left:'45%',
      textStyle:{
        fontSize:12
      }
    }],
    tooltip: {  //提示框组件
      trigger: 'item'
    },
    color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',  //表示图标的类型
        radius: ['20%', '30%'],  //饼的半径
        center:['50%','35%'],
        data:man
        
      },
      {
        name: '班级薪资分布',
        type: 'pie',  //表示图标的类型
        radius: ['20%', '30%'],  //饼的半径
        center:['50%','70%'],
        data: girl
        
      }
    ]

  };
  myCherts.setOption(option)
}
fn3()
// 地图
function fn4(data){
  // 因为用地图表示每个省有几名同学
// 所以可以提前准备好数据
const mapData = [
  { name: '南海诸岛', value: 0 },
  { name: '北京', value: 0 },
  { name: '天津', value: 0 },
  { name: '上海', value: 0 },
  { name: '重庆', value: 0 },
  { name: '河北', value: 0 },
  { name: '河南', value: 0 },
  { name: '云南', value: 0 },
  { name: '辽宁', value: 0 },
  { name: '黑龙江', value: 0 },
  { name: '湖南', value: 0 },
  { name: '安徽', value: 0 },
  { name: '山东', value: 0 },
  { name: '新疆', value: 0 },
  { name: '江苏', value: 0 },
  { name: '浙江', value: 0 },
  { name: '江西', value: 0 },
  { name: '湖北', value: 0 },
  { name: '广西', value: 0 },
  { name: '甘肃', value: 0 },
  { name: '山西', value: 0 },
  { name: '内蒙古', value: 0 },
  { name: '陕西', value: 0 },
  { name: '吉林', value: 0 },
  { name: '福建', value: 0 },
  { name: '贵州', value: 0 },
  { name: '广东', value: 0 },
  { name: '青海', value: 0 },
  { name: '西藏', value: 0 },
  { name: '四川', value: 0 },
  { name: '宁夏', value: 0 },
  { name: '海南', value: 0 },
  { name: '台湾', value: 0 },
  { name: '香港', value: 0 },
  { name: '澳门', value: 0 }
]

// 处理接口返回的数据
mapData.forEach(item => {
  // 每循环一次，在接口返回的数据中，有没有这个省的数据。如果有把value换掉
  let res = data.find(v => {
    return v.name.includes(item.name)
  })
  if (res) {
    item.value = res.value
  }
})


  let myCherts = echarts.init(document.querySelector('#map'))
  let option ={
    title:{
      text:'籍贯分布'
    },
    // 从零开始写地图
    series:[{
      type:'map', //type表示图表的类型是地图
      map:'china',//  map 表示做的是什么地图
      label:{
        show:true, //显示地区的名字
        fontSize:10 //文字大小
      },
      itemStyle:{  
        areaColor:'#E0FFFF',//地图区域的颜色。
        borderColor:'rgba(0,0,0,0.2)' //图形的描边颜色
      },
      emphasis:{  //高亮状态下的多边形和标签样式
        itemStyle:{
          areaColor:'#34D39A',
          borderWidth:0,
          shadowColor:'rgba(0,0,0,0.5)',
          shadowBlur:'20',
          shadowOffsetX:0,
          shadowOffsetY:0,
        }
      },
      data:mapData,
      tooltip:{
        trigger:'item'
      }

    }],
    visualMap:{
      type:'continuous',
      min:0,
      max:20,
      text:[20,0],
      left:50,
      buttom:10,
      inRange:{
        color:['#fff','blue']
      }

    } , //视觉映射组件
    tooltip:{
     
      formatter:'{b}:{c}位学员',
      textStyle:{
        color:'#fff'
      },
      backgroundColor:'rgba(0,0,0,0.5)',

    }
  };
  myCherts.setOption(option)
}
// fn4()

// ===========================================================



// 发送请求，获取接口数据
// token 令牌
axios({
  url:'http://ajax-api.itheima.net/dashboard',
  method:'GET',
  // 获取令牌
  headers:{
    Authorization:localStorage.getItem('token')
  }
}).then(res=>{
  // 折线图数据
  let fnZx = res.data.data.year
  let month = fnZx.map(item=>item.month)
  let salary = fnZx.map(item=>item.salary)
  fn(month,salary)
// =====================================================================
  // 右上角饼状图数据
  let fn1Bz=res.data.data.salaryData
  let salaryData = fn1Bz.map((item)=>{return {name:item.label,value:item.g_count + item.b_count}})
  fn1(salaryData)


  // =====================================================================
  // 柱状图数据
  let arr=res.data.data.groupData
  fn2(arr)


// =====================================================================

  // 左小角饼状图数据
  let fn3Bz=res.data.data.salaryData
  let man = fn3Bz.map(item=>{return {name:item.label,value:item.b_count}})
  let girl = fn3Bz.map(item=>{return {name:item.label,value:item.g_count}})
  fn3(man,girl)


    // =====================================================================
    // 地图
    let fnData = res.data.data.provinceData
    let data = fnData.map(item=>{return {name:item.name,value:item.value}})
    fn4(data)

    // ======================================================================

    let rowData = res.data.data.overview
    console.log(rowData)
    for(let k in rowData){
      document.querySelector(`[name=${k}]`).innerHTML = rowData[k]
    }
})

